import React from 'react';
import { Tag } from '@nutui/nutui-react-taro';


const colorMap = {
  "迟到": (
    <Tag plain color="#faad14" background="#faad14" round>
      迟到
    </Tag>
  ),
  "正常": (
    <Tag plain color="green" background="green" round>
      正常
    </Tag>
  ),
  "早退": (
    <Tag plain color="red" background="red" round>
      早退
    </Tag>
  ),
  "缺勤": (
    <Tag plain color="red" background="red" round>
      缺勤
    </Tag>
  ),
};



export default function RecordItem(props) {
  const { record } = props;
  const { checkIn, checkOut, employeeId, status } = record;
  return (
    // 这里需要根据状态来显示不同的颜色
    <div key={employeeId} className="w-full flex flex-col items-center bg-white">

      <div className="flex flex-row items-center w-full">
        <div className=" text-gray-600 mr-[4px]">出勤状态: </div>
        <div className=" text-gray-600">{colorMap[status]}</div>
      </div>

      <div className="flex flex-row items-center w-full px-[4px] py-[4px]">
        <div className=" text-gray-600 mr-[4px]">时间:</div>
        <div className=" text-gray-600">{checkIn}</div>~
        <div className=" text-gray-600">{checkOut}</div>
      </div>
    </div>
  );
}